<template>
    <div>
   <div class="item" v-for="(item ,index)  of list" :key="index">
     <div class="item-title">
       <span class="item-title-icon"></span>
       <span class="itemconent">{{item.title}}</span>
     </div>
     <div class="item-children" v-if="item.children">
       <List :list="item.children"></List>
     </div>

   </div>
    </div>
</template>

<script>

    export default {
        name: "List",
      props:{
        list:Array
      }

    }
</script>

<style scoped>
  .item-title{
    line-height: .8rem;
    font-size: .32rem;
    padding: .2rem;
    display: flex;
  }
  .item-title-icon{
    position: relative;
    left: .2rem;
    top: .25rem;
  display: inline-block;
  width: .36rem;
  height: .36rem;
  background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
  margin-right: .1rem;
  background-size: .4rem 3rem;
  }
  .item-children{
    padding: 0 .2rem;
  }
  .itemconent{
    margin-left: .2rem;
  }

</style>
